Role
Visual & UI
design
design
Visual design case study
•
2025
•
Brand system · UI
A visual system for fire-protection commerce
STI is the global leader in firestop and fire-rated pathway systems — but its digital brand felt dated next to the engineering inside the products. I rebuilt the visual layer for the HubSpot relaunch: a refreshed logo lockup, a disciplined color system around STI's navy and signature firestop red, a clearer type scale, and a graphics language carried across every screen.
The brief
Match the brand to the engineering
STI's products are precise, tested and trusted — but the old site read flat and inconsistent: a thin logo, ad-hoc blues, cramped type and clip-art iconography that undercut the credibility of a life-safety manufacturer.
The visual brief was to build a system, not a skin — components and rules that the STI team could apply themselves inside HubSpot, anchored in the equity they already had: the deep STI navy and the unmistakable firestop red.
01 — Logo
Logo update
The wordmark was rebuilt into a compact, confident lockup: a square "STI" mark that holds up at favicon size, paired with a spaced "FIRESTOP" descriptor. It keeps the brand's blue-and-red equity while gaining structure and a clear system for placement.
STIFirestop
Before · thin, inconsistent weightretired
STI
FIRESTOPSpecified Technologies
After · structured badge lockuprefreshed
Built for scale
The badge reads clearly from billboard to 16px favicon — no thin strokes to drop out.
Protected clearspace
Minimum padding equal to the height of the "S" keeps the mark uncrowded everywhere.
One system, four grounds
Defined treatments on navy, red, light and photographic backgrounds.
STI
On navySTI
On redSTI
On lightSTI
Reversed
02 — Color
Colour palette update
The old site drifted across half a dozen unrelated blues. The new palette is built on two anchors — STI Navy and Firestop Red — with a disciplined set of tints and neutrals for UI, all tuned to pass AA contrast on web.
Primary
Secondary
Signature
Surface
03 — Typography
Type & style guide
A single, engineered sans does the heavy lifting — geometric enough to feel technical, open enough to stay legible across dense spec tables. A mono is reserved for product codes and data labels.
Display / 72Engineer peace of mind
Heading / 44Firestop systems
Subhead / 28EZ-Path® fire-rated pathways
Body / 18Tested, listed and compliant solutions for penetrations, curtain wall, construction joints and smoke & acoustical applications — described in plain language for every trade.
Mono / 14SKU · WF300 — UL 1479 — 2 HR RATED
Specimen
AaBbCcGgKkRr 0123456789 & %
12141618222836445672
04 — Graphics
Iconography & graphics
Clip-art was replaced with a geometric icon set on a consistent grid and stroke — navy as the structural line, red as the single point of emphasis. A pair of brand patterns gives marketing surfaces texture without competing with product photography.
PenetrationsSealants & collars
Curtain WallPerimeter barrier
Construction JointsSprays & gaskets
Smoke & AcousticalEZ-Path NEZ
System SearchSubmittal builder
Digital ToolsEstimators
SustainabilityLEED credits
EngineeringSupport services
// Hazard motif — used sparingly for alerts & section breaks
// Dot grid — calm background texture
05 — In context
The system, shipped
The brand applied end-to-end across the responsive HubSpot build — desktop browsing and search on the left, the mobile product experience on the right. Drop in the real screens.
Desktop — home, search & product
Mobile — guided selection & PDP
Built in — HubSpot CMS
76%
increase in user acquisition
from direct search · first 30 days
from direct search · first 30 days
27%
rise in acquisition from
organic search · first 30 days
organic search · first 30 days
2↔
brand anchors — navy & red —
systematised across the site
systematised across the site
Client
It streamlined communication with customers and simplified their search for information — a 76% increase from direct searches and 27% from organic within the first 30 days.
Justin Pine · Senior Manager, Software & Services, Specified Technologies Inc.